<template>
  <div>
    <el-container>
      <el-header>
        <div class="firstSytle">
          <el-button size="mini" type="success" @click="initData" icon="el-icon-refresh">刷新</el-button>
          <el-button size="mini" type="danger" @click="clearRecord" icon="el-icon-delete">清空记录</el-button>
        </div>
      </el-header>
      <el-main style="padding-left: 1px;padding-top: 20px;height:100%">
        <div>
          <el-table :data="securitys" stripe v-loading="tableLoading" size="mini" style="width: 100%;">
            <el-table-column type="selection" width="20px"></el-table-column>
            <el-table-column prop="listId" label="序号" width="45px" align="center"></el-table-column>
            <el-table-column prop="id" label="检查编号" min-width="105px" align="center"></el-table-column>
            <el-table-column prop="buildId" label="公寓编号" min-width="68px" align="center"></el-table-column>
            <el-table-column prop="roomId" label="宿舍号" align="center"></el-table-column>
            <el-table-column prop="description" label="隐患描述" align="center"></el-table-column>
            <el-table-column prop="discover" label="检查人" align="center"></el-table-column>
            <el-table-column prop="discoverTime" label="检查时间" width="145px" align="center"></el-table-column>
            <el-table-column prop="operator" label="申请人" align="center"></el-table-column>
            <el-table-column prop="operateTime" label="申请时间" width="145px" align="center"></el-table-column>
            <el-table-column prop="checker" label="复查人" align="center"></el-table-column>
            <el-table-column prop="checkTime" label="复查时间" width="145px" align="center"></el-table-column>
            <el-table-column prop="status" label="隐患状态" align="center"></el-table-column>
            <el-table-column prop="flag" label="复查状态" align="center"></el-table-column>
            <el-table-column prop="result" label="复查结果" align="center"></el-table-column>
          </el-table>
          <div class="lastLine" style="margin-top: 10px">               
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page.sync="pageNum" :page-sizes="[10, 20,30,50,100,200,]"
                           :page-size="pageSize"
                           layout="sizes, prev, pager, next" :total="total">      
            </el-pagination>
          </div>
        </div>
      </el-main>
    </el-container>

  </div>

</template>

<script>
    import {getRequest, postMethod, postRequest, putRequest} from "../../utils/api";

    export default {
        data() {
            return {

                securitys: [],
                tableLoading: false,
                pageNum: 1,
                pageSize: 10,
                total: 0,
                list: [],
            };
        },
        methods: {
            initData: function () {
                this.tableLoading = true;
                var tempdate,tempdate1,tempdate2;
                this.getRequest("/security/sec/history/list?pageSize=" + this.pageSize + "&pageNum=" + this.pageNum).then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        this.total = resp.data.obj.total;
                        this.securitys = resp.data.obj.data;
                        for (var i = 0; i < this.securitys.length; i++) {
                            let b;
                            b = i + 1
                            this.securitys[i].listId = b
                            tempdate =this.securitys[i].discoverTime
                            this.securitys[i].discoverTime=tempdate.slice(0,tempdate.indexOf("."))
                            if(this.securitys[i].operateTime!=null && this.securitys[i].checkTime!=null){
                              tempdate1 =this.securitys[i].operateTime
                              tempdate2 =this.securitys[i].checkTime
                              this.securitys[i].operateTime=tempdate1.slice(0,tempdate1.indexOf("."))
                              this.securitys[i].checkTime=tempdate2.slice(0,tempdate2.indexOf("."))
                            }
                            switch (this.securitys[i].status) {
                                case 0:
                                    this.securitys[i].status = '待解决';
                                    break;
                                case 1:
                                    this.securitys[i].status = '已解决';
                                    break;
                            }
                            switch (this.securitys[i].flag) {
                                case 0:
                                    this.securitys[i].flag = '未申请';
                                    break;
                                case 1:
                                    this.securitys[i].flag = '已申请';
                                    break;
                            }
                            switch (this.securitys[i].result) {
                                case 0:
                                    this.securitys[i].result = '空';
                                    break;
                                case 1:
                                    this.securitys[i].result = '待审核';
                                    break;
                                case 2:
                                    this.securitys[i].result = '合格';
                                    break;
                                case 3:
                                    this.securitys[i].result = '不合格';
                                    break;
                            }
                        }
                    }
                })
            },
            clearRecord(){
                this.deleteRequest("/security/sec/history/delete").then(resp=>{
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        this.initData();
                        Message.success({message: data.data.msg});
                    }
                })

            },
            handleSizeChange(val) {    //分页
                this.pageSize = val;
                this.initData()
            },
            handleCurrentChange(val) {   //分页
                this.pageNum = val;
                this.initData()
            },

        },
        mounted: function () {
            this.initData();
        },

    }
</script>

<style scoped>
  .firstSytle {
    margin-top: 30px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .lastLine {
    display:  flex;
    flex-direction:  row;
    justify-content:  flex-end;
    margin:  10px 0 10px 0;
  }

  .el-row {
    margin: 10px 0;
  }

  .el-table {
    text-align: left;
    size: auto;
    width: 150px;
  }
</style>
